<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" href="${ctx}/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <jsp:include page="/pages/fragment/header.jsp"></jsp:include>
    <jsp:include page="/pages/fragment/left-nav.jsp"></jsp:include>

    <div class="layui-body">
        <form class="layui-form">
            <div class="layui-form-item">
                <label class="layui-form-label">日期：</label>
                <div class="layui-input-inline">
                    <input type="text" name="time1" id="test1"  lay-verify="" placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">to：</label>
                <div class="layui-input-inline">
                    <input type="text" name="time2" id="test2"  lay-verify="" placeholder="请输入标题" autocomplete="off" class="layui-input">
                </div>
            </div>
            <input type="button" value="查询" class="layui-btn" id="queryBtn">
        </form>
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <table class="layui-hide" id="demo" lay-filter="test" ></table>
        </div>

        <div class="layui-footer">
            <!-- 底部固定区域 -->
            © layui.com - 底部固定区域
        </div>
    </div>
    <script src="${ctx}/layui/layui.js"></script>
    <script>
        //JavaScript代码区域
        layui.use(['element','form','table','jquery','layer','laydate'], function(){
            var element = layui.element;
            var form = layui.form;
            var table = layui.table;
            var $ = layui.jquery;
            var layer = layui.layer;
            var laydate=layui.laydate;
            laydate.render({
                elem: '#test1' //指定元素
            });
            laydate.render({
                elem: '#test2' //指定元素
            });

            renderTable();
            //第一个实例
            function renderTable(){
                table.render({
                    elem: '#demo'
                    ,url: '${ctx}/bank/account' //数据接口
                    ,page: true //开启分页
                    ,cols: [[ //表头
                        {field: 'date', title: '日期', width:180, sort: true, fixed: 'left'}
                        ,{field: 'time', title: '时间', width:180}
                        ,{field: 'remark', title: '摘要', width:180}
                        ,{field: 'amount', title: '入账', width:180}
                        ,{field: 'balance', title: '余额', width:180}
                    ]]
                });
            }
            $('#queryBtn').click(function () {
                var time1 = $('input[name=time1]').val();
                var time2 = $('input[name=time2]').val();
                table.render({
                    elem: '#demo'
                    ,url: '${ctx}/bank/account' //数据接口
                    ,page: true //开启分页
                    ,cols: [[ //表头
                        {field: 'date', title: '日期', width:180, sort: true, fixed: 'left'}
                        ,{field: 'time', title: '时间', width:180}
                        ,{field: 'remark', title: '摘要', width:180}
                        ,{field: 'amount', title: '入账', width:180}
                        ,{field: 'balance', title: '余额', width:180}
                    ]],
                    where:{
                        time1:time1,
                        time2:time2
                    }
                });
            })





        });
    </script>
</body>
</html>
